import React, { useState, useMemo } from 'react';
import { alert_st, Ret, MDel, ListBox, WaitUmd, ListCheck, CardBox, ICard, sn_name, Title, PanelFind, useHigh, MainView, PanelTitle,
    Btn, is_empty, loc } from 'sui';
import { filter_item } from './cmd';

const Bind = ({ umd, cur, hreturn, hadd, hremove, main, setMain, checked, setChecked, title, alert }) => {
    const [filter, setFilter] = useState();
    const [high] = useHigh(140, 100);

    const getItem = () => {
        const data = umd.value;
        if (is_empty(data) || is_empty(main)) {
            return null;
        }

        return data.map((d, i) => {
            let f = main.find(t => d === t.sn);
            if (!f) {
                f = {sn: d};
            }

            const getDel = () => {
                return <MDel uid={f.sn} cl="green" hcmd={v => hremove(v)}/>;
            };

            const Alert = () => {
                if (!alert) {
                    return null;
                }

                return (
                    <div className="w-16">
                        {alert_st(f, alert)}
                    </div>
                );
            };

            return (
                <ICard key={f.sn} data={f} cl="green" tipleft={<Alert/>}>
                    {getDel()}
                </ICard>
            );
        });
    };

    const selectAll = () => {
        const user = filter_item(main, umd.value, filter);
        if (is_empty(user)) {
            return;
        }

        const d = user.map(d => d.sn);
        setChecked(d);
    };

    const filterRow = useMemo(() => {
        let user = filter_item(main, umd.value, filter);
        if (is_empty(user)) {
            return null;
        }

        return user.map(d => <ListCheck key={d.sn} value={d.name} subvalue={d.sn} checked={checked} setChecked={setChecked} uid={d.sn} alert={alert}/>);
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [filter, main, umd.value, checked]);

    const getUser = () => {
        const getCount = () => {
            if (is_empty(checked)) {
                return "";
            }

            return checked.length;
        };

        const Left = () => {
            return (
                <div className="inline-flex items-center justify-center">
                    <Btn hcmd={hadd}>{"<<"}</Btn>
                    <div className="ml-2">{getCount()}</div>
                </div>
            );
        };

        return (
            <div className="w-1/4 flex flex-col">
                <PanelFind cl="green" width="w-32" left={<Left/>} right={<Btn hcmd={selectAll}>{loc("l_270")}</Btn>} hcmd={v => setFilter(v)}/>
                <div className="overflow-y-auto" style={{ height: high - 50 + "px" }}>
                    <ListBox>
                        {filterRow}
                    </ListBox>
                </div>
            </div>
        );
    };

    const Left = () => <Title mod={sn_name(cur)} sub={title}/>;

    return (
        <MainView>
            <PanelTitle left={<Left/>} right={<Ret color="green" hcmd={hreturn}/>} cl="gray"/>
            <div className="flex flex-row">
                <div className="w-3/4 border-r-2 border-blue-300 overflow-y-auto" style={{ height: high + "px" }}>
                    <div className="mx-4 mt-4">
                        <CardBox>{getItem()}</CardBox>
                    </div>
                </div>
                {getUser()}
            </div>
            <WaitUmd umd={umd}/>
        </MainView>
    );
};

export {Bind};
